<template>
  <div>
    <div id="input-container">
    <!-- 输入框，用于输入搜索关键词 -->
    <el-input v-model="keyword" placeholder="请输入快递单号" suffix-icon="el-icon-search" style="width: 200px;"> </el-input>
    <el-input v-model="locationName" enabled style="width: 400px; margin-left: 5px;"></el-input>
    <el-button type="primary" style="margin-left: 5px;" @click="searchLocation">查询</el-button>
    </div >
    <div style="margin-top: 60px;">
    <div id="container"></div>
    </div>
  </div>

</template>

<script>
/* eslint-disable no-undef */
import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = {
  securityJsCode: 'e251280beeb217c28e517b1e855dd6b9'
}
export default {
  data() {
    return {
      map: null,
      keyword: '', // 快递单号
      markers: [],// 用于存储标记
      locationName: '' // 存储准确位置名称
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '09e3ed29746f5d97813dde4c24ddf144', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Marker','AMap.Geocoder'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
          .then(AMap => {
            this.map = new AMap.Map('container', {
              //设置地图容器id
              viewMode: '3D', //是否为3D地图模式
              zoom: 15, //初始化地图级别
              center: [106.529813,29.452537] //初始化地图中心点位置
            })
            this.map.addControl(new AMap.Scale());
            this.map.addControl(new AMap.ToolBar());
            this.map.addControl(new AMap.HawkEye());
            this.map.addControl(new AMap.MapType());
            this.map.addControl(new AMap.Marker());
          })
          .catch(e => {
            console.log(e)
          })
  },
  // 搜索位置信息
  searchLocation() {
    if (!this.keyword) {
      alert("请输入关键词")
      return
    }
    this.$axios.get(`${this.$httpUrl}/goods/getlocal/${this.keyword}`)
    // 假设后端接口为 /api/get-location，接收关键词参数并返回经纬度
        .then(response => {
          // 假设后端返回的是一个 location 字段，格式为 "经度,纬度"
          const data = response.data; // 直接使用 response.data
          const location = data.data;
          console.log('获取的位置信息:', location);
          if (location) {
            // 拆分为经度和纬度
            const [lng, lat] = location.split(',').map(coord => parseFloat(coord));

            // 检查经纬度是否有效
              if (!isNaN(lng) &&!isNaN(lat)) {
                // 使用高德地图逆地理编码
                AMapLoader.load({
                  key: '09e3ed29746f5d97813dde4c24ddf144',
                  version: '2.0',
                }).then(AMap => {
                  const geocoder = new AMap.Geocoder();
                  geocoder.getAddress([lng, lat], (status, result) => {
                    if (status === 'complete' && result.info === 'OK') {
                      const address = result.regeocode.formattedAddress;
                      // 可以将 address 存储起来或者进行其他处理
                      this.locationName = address; // 假设有一个 data 属性 locationName 用于存储地址
                      console.log(`地址: ${address}`);
                      this.updateMapCenter(lat, lng, address);
                    } else {
                      console.error('获取位置信息失败');
                    }
                  });
                }).catch(e => {
                  console.log(e);
                });
              console.log(`经度: ${lng}, 纬度: ${lat}`);

              // 使用经纬度做进一步操作，例如初始化地图
              this.updateMapCenter(lat, lng);
            } else {
              console.error('无效的经纬度');
            }
          } else {
            console.error('未获取到位置数据');
          }
        })
        .catch(error => {
          console.error('请求出错', error);
        });

  },
  // 更新地图中心点
  updateMapCenter(lat, lng,address) {
    // 清除之前的标记
    this.clearMarkers();
    // 更新地图中心点
    this.map.setCenter([lng, lat]);
    // 添加新的标记
    const marker = new AMap.Marker({
      position: new AMap.LngLat(lng, lat),
      map: this.map,
      title: address
    });
    this.markers.push(marker); // 存储新的标记
  },
    clearMarkers() {
      // 清除之前的标记
      this.markers.forEach(marker => {
        marker.setMap(null);
      });
      this.markers = []; // 清空标记数组
    }

},
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
  }
}
</script>

<style scoped>
#container {
  padding: 0;
  margin: 0 auto; /* 居中 */
  width: 100%; /* 调整宽度 */
  height: 550px; /* 调整高度 */
  border: 1px solid #ccc; /* 可选：添加边框 */
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}


#input-container {
  position: absolute;
  top: 80px; /* 距离顶部的距离 */
  left: 55%; /* 水平居中 */
  transform: translateX(-50%); /* 使其真正居中 */
  z-index: 1000;
}

</style>

